<template>
  <div
    id="audio_box"
    class="course_details"
  >
    <!-- 头部 -->
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">音频播放</span>
      <img
        src="@/assets/resource/share.png"
        class="share_icon"
        @click="shareBtn()"
      />
    </div>
    <div class="course_autoBox" :style="level!=2&&pageData.messageCode&&pageData.realPrice> 0?'paddingBottom:1.56rem':''">
      <div class="course_cover">
        <img class="cover" :src="coverUrl(pageData.cover)" @error="errImg('audio')" />
      </div>
      <div class="course_main" >
        <div class="course_name">{{ pageData.name }}</div>
        <div class="course_audio">
          <div id="audio"></div>
        </div>
        <!-- <div class='audio_box' v-if="pageData.messageCode" @click='videTap'></div> -->
        <div class="price_con" v-if="!pageData.courseId">
          <div class="course_price" v-if="pageData.realPrice">
            <span v-if="pageData.realPrice > 0" style="color:#E40000"
              >￥{{ Number(pageData.realPrice).toFixed(2) }}</span
            >
            <span v-else style="color:#24b562">免费</span>
            <span class="course_lineprice" v-if="pageData.realPrice > 0 "
              >￥{{ Number(pageData.price).toFixed(2) }}</span
            >
          </div>
          <img
            src="@/assets/common/collect.png"
            class="collect_icon"
            @click="collect"
            v-if="pageData.isCollection == 1"
          />
          <img
            src="@/assets/common/collect_default.png"
            class="collect_icon"
            @click="collect"
            v-else
          />
        </div>
      </div>

      <!-- 详情 -->
      <div class="detail_main" v-if="tabType == 'detail'">
        <div class="detail_title" v-if="content">内容简介</div>
        <div class="detail_content" v-if="content">
          <div v-html="content"></div>
        </div>
        <div class="detail_title">
          精选评论
          <div class="add_review" @click="addReview">
            <img
              src="@/assets/courseDetails/review.png"
              class="review_icon"
            />写留言
          </div>
        </div>
        <!-- 评论 -->
        <review
          :reviewData="reviewData"
          :reviewTotal="reviewTotal"
          :reviewType="reviewType"
          :postId="listQuery.oid"
          :listNull="listNull"
          :loading="loading"
          v-on:myList="agreeBtn($event)"
          :name="pageData.name"
        ></review>
      </div>
      <!-- 推荐 -->
      <!-- <div class="recommend_main" v-if="tabType == 'recommend'"> -->
      <!-- 目录 -->
      <!-- <div class="catalog_main" v-if="pageData.courseId">
          <catalog
            :catalogList="pageData.list"
            :catalogId="listQuery.oid"
            :messageCode="pageData.messageCode"
            @changeOrder="changeOrder($event)"
          ></catalog>
        </div> -->
      <!-- 相关推荐 -->
      <!-- <div class="recommend_title" v-if="!pageData.courseId">相关推荐</div>
        <div v-if="!pageData.courseId">
          <recommend :recommendList="pageData.recomedLibraryList"></recommend>
        </div>
      </div> -->
    </div>

    <div
      class="course_btn"
      v-if="pageData.messageCode && pageData.realPrice > 0 && level != 2"
    >
      <div class="course_open" @click="openVip">开通VIP免费</div>
      <div class="bottom_btn" @click="payBtn">立即购买</div>
    </div>
    <!-- <div
      class="course_btn"
      v-if="!pageData.courseId && (pageData.messageCode && pageData.price > 0)"
    >
      <div>
        <div class="bottom_btn" @click="payBtn">
          <img src="@/assets/courseDetails/pay.png" class="pay_icon" />
          立即支付
        </div>
      </div>
    </div> -->
    <!-- 分享功能 -->
    <div class="share_box" v-if="shareDialog">
      <div class="share_main" ref="imageWrapper" v-if="!dataURL">
        <div class="share_header_box">
          <img
            class="header_cover"
            :src="coverUrl(personCover, 'files')"
            v-if="personCover"
            crossOrigin="anonymous"
          />
          <img src="@/assets/common/cover.png" class="header_cover" v-else />
          <span>{{ account }}</span>
          <span class="share_text">给您分享一堂好课</span>
        </div>
        <div class="share_cover">
          <img
            :src="coverUrl(pageData.cover)"
            class="share_cover_img"
            crossOrigin="anonymous"
            @error="errImg('audio')"
          />
          <!-- <img class='share_cover_img' src='@/assets/course/cover.png' v-else> -->
        </div>
        <div class="share_title">
          {{
            pageData.name.length > 27
              ? pageData.name.substr(0, 27) + "..."
              : pageData.name
          }}
        </div>
        <div class="share_bottom">
          <div class="share_left">
            <div>长按识别图中小程序码</div>
            <div>了解更多课程</div>
          </div>
          <div class="share_right">
            <div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
          </div>
        </div>
      </div>
      <div class="domo">
        <img :src="dataURL" alt="" v-if="dataURL" class="share_picture" />
      </div>
      <div class="canvas_text">长按图片保存或发送给朋友</div>
      <div class="canvas_image">
        <img
          src="@/assets/common/delete_icon.png"
          class="delete_icon"
          @click="closeShare"
        />
      </div>
    </div>
    <!-- 支付弹窗 -->
    <!-- <div class="member_payTip" v-if="ispayShow">
    <div class="member_pay_con">
      <div class="member_pay_text" @click="payCancle">请确认微信支付是否已完成</div>
      <div class="member_pay_text" style="color:#246EEE" @click="payOver">已完成支付</div>
      <div class="member_pay_text" @click="payCancle">支付遇到问题重新支付</div>
    </div>
  </div> -->
    <!-- 预览图片 -->
    <img-preview
      :previewList="pageData.imgList"
      :imgIndex="imgIndex"
      v-if="previewDialog"
    ></img-preview>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import {
  classDetAPI,
  reviewAPI,
  agreeAPI,
  audioDetAPI,
  videoTimeAPI,
  getAudioAPI,
  getAudioList
} from "@/api/course.js";
import { favAPI, cancelFavAPI } from "@/api/person.js";
import review from "@/components/review";
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";
import { getMemberAPI } from "@/api/person.js";
import { createOrderAPI, isPayCoursementAPI } from "@/api/order.js";
import "xgplayer";
import Music from "xgplayer-music";
import catalog from "@/components/catalog";
import recommend from "@/components/recommend";
import { imgUrl } from "@/utils/global.js";
import utils from "@/utils/utils.js";
import imgPreview from "@/components/preview";
import { collectSingleAPI } from "@/api/common";
import "../../../static/css/common.css";

export default {
  name: "audioDet",
  components: {
    review,
    recommend,
    imgPreview,
    catalog
  },
  data() {
    return {
      pageData: {},
      intro: null,
      isOpen: false,
      reviewTotal: null,
      reviewData: [],
      tabType: "detail",
      listQuery: {
        oid: ""
      },
      reviewType: "audio",
      audioTime: 0,
      content: null,
      orderText: "倒序",
      durationIntval: "",
      listNull: false,
      loading: false,
      account: "",
      shareDialog: false,
      dataURL: "",
      currentTime: "",
      personCover: "",
      imgUrl: imgUrl,
      // ispayShow: false,
      previewDialog: false,
      imgIndex: 0,
      level: localStorage.getItem('level')
    };
  },
  created() {
    if (localStorage.getItem("ispayment")) {
      //判断是否支付过
      isPayCoursementAPI({ oid: localStorage.getItem("coursePayId") }).then(
        res => {
          //后台接口判断是否支付
          if (res.data.data == 1) {
            //支付成功
            Toast("支付成功");
          } else {
            Toast("支付失败");
          }
          localStorage.removeItem("ispayment");
          this.listQuery.oid = localStorage.getItem("audioId");
          this.getDetails();
          this.getMember();
          // this.ispayShow = true
        }
      );
    } else {
      this.listQuery.oid = localStorage.getItem("audioId");
      this.getDetails();
      this.getMember();
    }
  },
  destroyed() {
    this.getvideoprogress();
  },
  methods: {
    changeTab(type) {
      //切换目录和详情和推荐
      this.tabType = type;
    },
    getDetails() {
      let that = this;
      audioDetAPI(this.$route.query.id).then(res => {
        if (res.data.code == 0) {
          this.pageData = res.data.data;
          localStorage.setItem("audioId",this.pageData.id)
          this.content = res.data.data.detail
            ? res.data.data.detail.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto"'
              )
            : "";

          this.getAudio();
          this.getReviewList(); //获取评论列表
        } else {
          Toast(res.data.msg);
        }
      });
    },
    changeImg($event) {
      //预览图片
      let that = this;
      if ($event.toElement.localName == "img") {
        that.imgIndex = this.pageData.imgList.indexOf(
          $event.toElement.currentSrc
        );
        that.previewDialog = true;
      }
    },
    getAudio() {
      let that = this;
      getAudioList(this.pageData.audio).then(res => {
        if (res.data.code == 0) {
          let player = new Music({
            id: "audio",
            url: [
              {
                src: that.imgUrl + "file/" + res.data.data
              }
            ],
            fluid: true,
            useHls: true,
            volume: 0.8
          });
          player.on("timeupdate", function(e) {
            // if(localStorage.getItem('currentTime') != "0") {
            //   that.currentTime = localStorage.getItem('currentTime')
            // } else {
            //   that.currentTime = (e.currentTime.toFixed(0)) * 1000
            // }
            that.currentTime = (e.currentTime.toFixed(0)) * 1000;
            console.log(that.currentTime,'currentTime')
          });
          player.on("play", function(e) {
            //判断是否有权限
            if (that.pageData.messageCode) {
              Toast(that.pageData.message);
              player.pause();
              return;
            }
          });
        }
      });
    },
    getMember() {
      getMemberAPI().then(res => {
        if (res.data.code == 0) {
          this.account = res.data.data.account;
          this.personCover = res.data.data.img;
        }
      });
    },
    getvideoprogress() {
      let data = {
        time: this.currentTime,
        // videoId: this.listQuery.oid
        resourceId: this.pageData.id
      };
      videoTimeAPI(data).then(res => {
        if(res.data.code === 0) {
          localStorage.setItem('currentTime',this.currentTime)
        }
      });
    },
    shareBtn() {
      //分享
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return;
      }
      this.shareDialog = true;
      let that = this;
      that.$nextTick(() => {
        that.creatQrCode();
      });
      setTimeout(function() {
        html2canvas(that.$refs.imageWrapper, {
          useCORS: true,
          allowTaint: true,
          backgroundColor: null
        }).then(canvas => {
          that.dataURL = canvas.toDataURL();
        });
      }, 1000);
    },
    collect() {
      //收藏和取消收藏
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return false;
      }
      let data = {
        id: this.pageData.id,
        type: this.pageData.resourceType
      };
      collectSingleAPI(data).then(res => {
        if (res.data.code === 0) {
          this.pageData.isCollection == 1
            ? Toast("已取消收藏")
            : Toast("收藏成功");
          this.pageData.isCollection = this.pageData.isCollection == 1 ? 0 : 1;
        } else {
          // Toast(res.data.msg);
          Toast("收藏失败");
        }
      });
    },
    creatQrCode() {
      let text = window.location.href;
      let that = this;
      setTimeout(function() {
        let qrcode = new QRCode("qrcode", {
          width: 72,
          height: 66,
          text: text, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff"
        });
      }, 500);
    },
    getReviewList() {
      let data = {
        pageSize: 5,
        pageNum: 1,
        resourceId: this.pageData.id,
        resourceType: 5 //3课程5视频6音频
      };
      this.loading = true;
      reviewAPI(data).then(res => {
        if (res.data.code == 0) {
          this.reviewData = res.data.data.list;
          this.reviewTotal = res.data.data.total;
          this.listNull =
            res.data.data.list && res.data.data.list.length > 0 ? false : true;
        } else {
          Toast(res.data.msg);
        }
        this.loading = false;
      });
    },
    payBtn() {
      let goodsList = [];
      goodsList.push({
        goodsId: this.pageData.id,
        goodsType: this.pageData.resourceType,
        num: 1,
        realPrice: this.pageData.realPrice
      });
      console.log(goodsList);
      createOrderAPI({ buyType: 1, goodsList: goodsList }).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.navigationFuc("orderList", {
            orderId: res.data.data,
            title: "音频"
          });
        } else {
          Toast(res.data.msg);
        }
      });
    },
    isPay() {
      //判断支付
      let that = this;
      isPayCoursementAPI({ oid: localStorage.getItem("audioPayId") }).then(
        res => {
          if (res.data.data == 1) {
            //支付成功
            Toast("支付成功");
            this.getDetails();
            this.getMember();
          } else {
            setTimeout(() => {
              that.isPay();
            }, 3000);
          }
        }
      );
    },
    changeOrder() {
      //更改排序
      if (this.orderText == "正序") {
        this.orderText = "倒序";
        this.listQuery.orderBy = "sort asc";
      } else {
        this.orderText = "正序";
        this.listQuery.orderBy = "sort desc";
      }
      this.getDetails();
    },
    // collect() {
    //   //收藏和取消收藏
    //   if (!localStorage.getItem("y-token")) {
    //     //判断是否登录
    //     this.$router.push({ name: "login" });
    //     return false;
    //   }
    //   let that = this;
    //   let data = {
    //     id: this.listQuery.oid,
    //     type: 6
    //   };
    //   let arr = [];
    //   arr.push(data);
    //   if (this.pageData.isCollection == 0) {
    //     //收藏
    //     favAPI({ goodsList: arr }).then(res => {
    //       if (res.data.code == 0) {
    //         Toast("收藏成功");
    //         this.pageData.isCollection = 1;
    //       } else {
    //         Toast(res.data.msg);
    //       }
    //     });
    //   } else {
    //     // 取消收藏
    //     cancelFavAPI({ goodsList: arr }).then(res => {
    //       if (res.data.code == 0) {
    //         Toast("已取消收藏");
    //         this.pageData.isCollection = 0;
    //       } else {
    //         Toast(res.data.msg);
    //       }
    //     });
    //   }
    // },
    // agreeBtn(id) {
    //   //点赞 --- icon实现
    //   let that = this;
    //   agreeAPI(id).then(res => {
    //     if (res.data.code == 0) {
    //       //点赞成功
    //       let data = that.reviewData;
    //       data.forEach(function(item, index) {
    //         if (item.id == id) {
    //           item.isAgree = 1;
    //           item.fabulousNum = item.fabulousNum + 1;
    //         }
    //       });
    //       that.reviewData = data;
    //       Toast("点赞成功");
    //     } else {
    //       Toast(res.data.msg);
    //     }
    //   });
    // },
    agreeBtn(data) {
      //点赞 --- icon实现
      let that = this;
      let type = data.isAgree == 0 ? 1 : 0;
      agreeAPI({ commentId: data.id, type: type }).then(res => {
        if (res.data.code === 0) {
          //点赞成功
          this.getReviewList();
          Toast(data.isAgree == 0 ? "点赞成功" : "已取消点赞");
        } else {
          Toast(res.data.msg);
        }
      });
    },
    addReview() {
      //去评论
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
      } else {
        if(this.level != 2) {
          this.$router.push({
            name: "addReview",
            query: {
              resourceType: this.pageData.resourceType,
              resourceId: this.pageData.id,
              resourceName: this.pageData.name
            }
          });
        } else {
          Toast('请用个人账号登录进行评论')
        }
      }
    },
    videTap() {
      //查看无权限视频
      Toast(this.pageData.message);
    },
    closeShare() {
      //关闭
      this.shareDialog = false;
    },
    openVip() {
      this.navigationFuc("member");
    }
  }
};
</script>

<style>
/* headerTitle */
.share_icon {
  width: 0.36rem;
  height: 0.36rem;
  margin: auto 0 auto 30%;
}
#audio_box .xgplayer {
  padding: 0 !important;
}
#audio_box .xgplayer-skin-default {
  background: #fff !important;
  margin-top: 0.6rem !important;
}
#audio_box .xgplayer-skin-default.xgplayer-music .xgplayer-controls {
  height: 82px !important;
}
#audio_box
  .xgplayer-skin-default.xgplayer-music
  .xgplayer-controls
  .xgplayer-cover,
#audio_box
  .xgplayer-skin-default.xgplayer-music
  .xgplayer-controls
  .xgplayer-progress
  .xgplayer-name {
  display: none !important;
}
#audio_box .xgplayer-skin-default .xgplayer-progress-outer {
  width: 200px !important;
}
#audio_box .xgplayer-skin-default .xgplayer-controls {
  background: none !important;
}
/* slider */
#audio_box
  .xgplayer-skin-default.xgplayer-music
  .xgplayer-controls
  .xgplayer-progress {
  position: inherit !important;
  left: -100px !important;
  top: 0 !important;
}
#audio_box .xgplayer-skin-default .xgplayer-progress-outer {
  width: 7rem !important;
  top: 0 !important;
  margin-left: 100px !important;
}
#audio_box
  .xgplayer-skin-default.xgplayer-music
  .xgplayer-controls
  .xgplayer-progress
  > * {
  background: #dfdfdf !important;
}
#audio_box .xgplayer-skin-default .xgplayer-progress-cache {
  background: #dfdfdf !important;
}
#audio_box .xgplayer-skin-default .xgplayer-progress-played {
  background: #ff7168 !important;
}
/* time */
#audio_box
  .xgplayer-skin-default.xgplayer-music
  .xgplayer-controls
  .xgplayer-time {
  top: 0;
  margin-top: 10px !important;
  position: inherit;
  margin-left: 75%;
  text-align: left;
  width: 150px;
}
#audio_box .xgplayer-skin-default .xgplayer-time span {
  color: #adb1c4 !important;
}
#audio_box .xgplayer-skin-default .xgplayer-time .xgplayer-time-current {
  color: #adb1c4 !important;
}
/* 播放和暂停 */
#audio_box .xgplayer-play {
  margin-left: 30%;
  margin-top: 30px;
}
/* 播放 */
#audio_box .xgplayer-icon-play {
  width: 1.23rem !important;
  height: 1.23rem !important;
  /* background: url("../../assets/courseDetails/play_icon.png") no-repeat center; */
  background: url("../../assets/course/action.png") no-repeat center;
  background-size: 100% 100%;
}
/* 暂停 */
#audio_box .xgplayer-icon-pause {
  width: 1.23rem !important;
  height: 1.23rem !important;
  /* background: url("../../assets/courseDetails/stop.png") no-repeat center; */
  background: url("../../assets/course/stop.png") no-repeat center;
  background-size: 70% 70%;
}
#audio_box .xgplayer-icon-play svg,
#audio_box .xgplayer-icon-pause svg {
  display: none !important;
}
#audio_box .xgplayer-icon-play svg,
.xgplayer-icon svg {
  display: none !important;
}
/* 回退 */
#audio_box .xgplayer-backward {
  width: 0.52rem !important;
  height: 0.47rem !important;
  margin-left: 5%;
  margin-top: 1.2rem;
  /* background: url("../../assets/article/back.png") no-repeat center; */
  background: url("../../assets/course/back.png") no-repeat center;
  background-size: 50% 50%;
}
/* 快进 */
#audio_box .xgplayer-forward {
  width: 0.52rem !important;
  height: 0.47rem !important;
  margin-left: 32%;
  margin-top: 1.2rem;
  /* background: url("../../assets/article/forward.png") no-repeat center; */
  background: url("../../assets/course/quick.png") no-repeat center;
  background-size: 50% 50%;
}
/* 上一首下一首 */
#audio_box .xgplayer-prev,
.xgplayer-next {
  display: none;
}
</style>

<style scoped>
.course_details {
  min-height: 100%;
}
/* 底部按钮 */
.course_btn {
  width: 100%;
  height: 1.03rem;
  position: fixed;
  left: 0;
  bottom: 0;
}
.course_cover {
  /* height: 2.54rem; */
  /* width: 52%; */
  /* position: relative; */
  /* margin: 0 auto; */
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
}
.cover {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
}
.course_name {
  margin-top: 0.38rem;
  font-size: 17px;
  font-weight: bold;
  color: #202021;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin: 0 0.62rem;
}
.course_audio {
  position: relative;
  height: 2.4rem;
  width: 90%;
  overflow: hidden;
  padding-top: 0.7rem;
  margin: 0 auto;
}
audio {
  max-width: 100%;
}
.audio_box {
  height: 2rem;
  width: 100%;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 4000;
}
.course_main {
  padding: 0.32rem 0.25rem 0.48rem;
  border-bottom: solid 0.14rem #f5f5f5;
  box-sizing: border-box;
}
/* 价格 */
.price_con {
  overflow: hidden;
  padding-top: 0.25rem;
  border-top: 1px solid #f5f5f5;
}
.course_price {
  color: #e40000;
  font-size: 18px;
  font-weight: 500;
  float: left;
}
.course_lineprice {
  color: #999999;
  font-size: 14px;
  font-weight: normal;
  margin-left: 0.16rem;
  text-decoration: line-through;
}
.collect_icon {
  float: right;
  width: 0.4rem;
  height: 0.38rem;
  margin-top: 0.1rem;
  margin-right: 0.4rem;
}
.course_title {
  border-bottom: solid 1px #e6eaf2;
  height: 0.96rem;
  line-height: 0.96rem;
  color: #232323;
}
.title {
  float: left;
  width: 50%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
.bottom_line {
  width: 1.44rem;
  height: 0.06rem;
  background: #316ad8;
  margin: 0 auto;
}
.hover_color {
  color: #316ad8;
  font-weight: bold;
}
/* 详情 */

.detail_main {
  margin: 0 0.5rem;
}
.detail_title {
  color: #333333;
  font-weight: bold;
  font-size: 18px;
  margin-top: 0.8rem;
}
.add_review {
  height: 0.5rem;
  padding: 0 0.26rem;
  color: #fff;
  background: linear-gradient(
    -25deg,
    rgba(252, 116, 18, 1) 0%,
    rgba(247, 139, 62, 1) 100%
  );
  border-radius: 0.25rem;
  line-height: 0.5rem;
  float: right;
  font-weight: normal;
  font-size: 11px;
  margin-top: 0.1rem;
}
.review_icon {
  height: 0.27rem;
  width: 0.27rem;
  float: left;
  margin-top: 0.11rem;
  margin-right: 0.12rem;
}
.detail_content {
  margin-top: 0.4rem;
  margin-bottom: 0.1rem;
}
/* 推荐 */
.recommend_main {
  margin: 0 0.3rem;
}
.recommend_title {
  color: #222;
  font-weight: bold;
  font-size: 20px;
  margin-top: 0.5rem;
}
/* 购买按钮 */
/* 底部按钮 */
.course_btn {
  width: 100%;
  height: 1.56rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0px -1px 42px 0px rgba(223, 223, 223, 0.6);
  padding: 0.29rem 0.3rem;
  box-sizing: border-box;
  display: flex;
}
.course_open {
  width: 4.79rem;
  height: 100%;
  background: #ff7168;
  border-radius: 0.1rem;
  color: #fbfbfb;
  font-size: 14px;
  font-weight: bold;
  margin-right: 0.2rem;
  text-align: center;
  line-height: 0.98rem;
}
.bottom_btn {
  height: 100%;
  line-height: 0.98rem;
  width: 1.91rem;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  text-align: center;
  border: 0.02rem solid #ff7168;
  color: #ff7168;
  border-radius: 0.1rem;
  box-sizing: border-box;
}
/* audio */
.audio_time {
  text-align: right;
  color: #adb1c4;
  font-size: 10px;
  font-weight: 500;
  margin-right: 0.3rem;
}
.audio_icons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.27rem;
}
slider {
  margin-bottom: 0.1rem;
}
.back_icon {
  height: 0.54rem;
  width: 0.52rem;
  margin-left: 6%;
}
.prev_icon {
  height: 0.27rem;
  width: 0.27rem;
  margin-left: 15%;
}
.bf_icon {
  height: 0.84rem;
  width: 0.84rem;
  margin-left: 14%;
}
.next_icon {
  height: 0.27rem;
  width: 0.27rem;
  margin-left: 14%;
}
.forward_icon {
  height: 0.54rem;
  width: 0.52rem;
  margin-left: 13%;
}
.share_box {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  z-index: 4000;
  top: 0;
}
.domo {
  width: 77%;
  margin: 0 auto;
  margin-top: 0.8rem;
}
.domo img {
  display: inline-block;
  min-height: 8rem;
  width: 100% !important;
}
.share_main {
  width: 77%;
  margin: 0 auto;
  min-height: 8rem;
  margin-top: 0.8rem;
  overflow: hidden;
  background: url("../../assets/course/bg.png");
  background-size: 100% 100%;
  padding: 0.58rem 0.3rem 0 0.3rem;
  box-sizing: border-box;
}
.share_header_box {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.share_header_box .header_cover {
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.16rem;
}
.share_header_box .share_text {
  color: #999;
  font-size: 12px;
  margin-left: 0.09rem;
}
.share_cover {
  height: 3.26rem;
  width: 100%;
  margin-top: 0.2rem;
}
.share_cover_img {
  height: 3.26rem;
  width: 100%;
}
.share_title {
  color: #121212;
  font-size: 15px;
  font-weight: bold;
  margin-top: 0.15rem;
  height: 0.76rem;
}
.share_bottom {
  margin-top: 0.9rem;
}
.share_left {
  float: left;
  color: #999da8;
  line-height: 0.4rem;
  font-size: 14px;
}
.share_right {
  float: right;
  margin-top: -0.2rem;
  height: 1.34rem;
  width: 1.45rem;
}
.canvas_text {
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding-top: 0.35rem;
  padding-bottom: 0.4rem;
  border-radius: 0.14rem;
}
.canvas_image {
  width: 100%;
  text-align: center;
}
.delete_icon {
  height: 0.84rem;
  width: 0.84rem;
  display: inline-block;
  margin: 0 auto;
}
/* 支付弹窗 */
.member_payTip {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
.member_pay_con {
  width: 80%;
  margin-left: 10%;
  background: #fff;
  border-radius: 8px;
  height: 3.32rem;
  position: absolute;
  top: 50%;
  margin-top: -1.66rem;
}
.member_pay_text {
  color: #333333;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 17px;
}
.member_pay_text:last-child {
  border-bottom: none;
}
</style>

<style>
.xgplayer-skin-default .xgplayer-enter .xgplayer-enter-spinner {
  height: 20px !important;
  width: 20px !important;
}
</style>
